<template>
	<div>
		<div>
			<div class="cart" v-for="(item,index) in getCart" :key="index">
				<van-checkbox :value="item.selected" @click="oneCheckHandler(item)"></van-checkbox>
				<van-card :price="item.price*10000" :title="item.content" :thumb="item.img?item.img[0]:''">
				</van-card>
				<van-stepper size="32" :value="item.num" min="1" max="10" @plus="inc(item)" @minus="dec(item)" />
			</div>
		</div>
		<van-submit-bar v-if="getCart.length>0" custom-class="van-submit-bar" @submit='subOrder' :price="cartTotal*1000000" button-text="提交订单">
			<van-checkbox @click="checkAllHandler" v-model="checked">全选</van-checkbox>
			
		</van-submit-bar>
		<div>
			<van-cell title='没有东西'></van-cell>
		</div>
	</div>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from "vuex"
	
	export default {
		data() {
			return {
				checked: true,
				cart:''
			}
		},
		computed: {
			// ...mapState(['cart']),
			...mapGetters(['cartTotal',"getCart"])
		},
		created() {
			
		},
		methods: {
			...mapMutations(['countCart']),
			...mapActions(['inc', 'dec', 'checkAll', 'checkOne']),
			checkAllHandler() {
				this.checked = !this.checked;
				
				this.checkAll(this.checked)
			},
			oneCheckHandler(item) {
				this.checkOne(item);
			},
			subOrder(){
				this.countCart();
				
				this.$toast.success('支付成功');
			}
		}
	}
</script>

<style scoped="scoped">
	.cart {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
	}
	.van-submit-bar {
	    position: relative !important;
	}
</style>
